<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
				@search="$refs.table.refresh(true)"
				@reset="
					() => {
						(this.queryParam = {}), $refs.table.refresh(true);
						this.startTime = '';
						this.queryParam.operationType = 'requestLog.01';
					}
				"
      >
        <!--toolBar-->
        <template slot="toolBtn" slot-scope="scope">
          <a-button
						type="danger"
						icon="delete"
						@click="handleSub($refs.table.selectedRowKeys)"
          >{{$ct("delete","删除")}}
          </a-button>
          <!--<a-button-->
              <!--icon="delete"-->
              <!--type="danger"-->
              <!--@click="handleSub($refs.table.selectedRowKeys)"-->
          <!--&gt;清空-->
          <!--</a-button>-->
        </template>

        <!--search -->
        <template slot="toolForm">
          <a-form-item :label="$ct('requestTime','请求时间')">
            <a-range-picker style="width: 280px"
							:ranges="{
								'今天': [moment(), moment()],
								'最近一周': [ moment().add(-1, 'W'),moment()],
								'最近一个月': [moment().add(-1, 'M'),moment()] ,
								'最近三个月': [ moment().add(-3, 'M'),moment()]
							}"
							:placeholder="[$ct('StartTime','开始时间'), $ct('EndTime','结束时间')]"
							@change="startTimeOnChange"
							:valueFormat="'YYYY-MM-DD'"
							v-model="startTime"
						/>
          </a-form-item>
          <a-form-item :label="$ct('requestAccount','请求账号')" class="margin-right-sm">
            <a-input v-model="queryParam.userNameId" :placeholder="$ct('requestAccount','请求账号')"/>
          </a-form-item>
        </template>
      </tool-bar>

      <!--	table	 -->
      <DataGrid
				ref="table"
				:columns="columns"
				:url="url"
				:queryParam="queryParam"
				rowKey="uuid"
				:format-conditions="true"
      >
        <span slot="renderUserNameId" slot-scope="{ text, record, index }">
					{{ record.userName }}/{{  record.userNameId }}
        </span>
        <template slot="renderAction" slot-scope="{ text, record }">
          <a style="margin-right: 5px" @click="() => handleEdit(record)">{{$ct("detail","详情")}}</a>
        </template>
      </DataGrid>

      <!-- dialog	 -->
      <edit-form
				ref="createModal"
				:visible="visible"
				:model="mdl"
				@cancel="handleCancel()"
      />
    </div>
  </div>
</template>

<!--script-->
<script>
import moment from 'moment';
//数据表格组件
import {DataGrid} from "@/components";
//方法封装
import {dataGridMixin} from "@/mixins/dataGridMixin";
//新增编辑界面
import editForm from './edit.vue'
//字典
import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag'
import TMultiSelectTag from '@/components/TopVUI/dict/TMultiSelectTag'

export default {
  name: "Table",
  components: {DataGrid, editForm, TDictSelectTag, TMultiSelectTag},
  mixins: [dataGridMixin],
  filters: {},
  data() {
    return {
      columns: [
        {
          title: '请求时间',
          width: 200,
          dataIndex: 'createTime',
					langCode: "requestTime"
        },
        {
          title: '请求描述',
          width: 200,
          dataIndex: 'operationDesc',
					langCode: "requestDesc"
        },
        {
          title: '请求账号',
          width: 160,
          dataIndex: 'userNameId',
					langCode: "requestAccount",
          scopedSlots: {
            customRender: 'renderUserNameId'
          }
        },
        {
          title: '请求IP',
          dataIndex: 'operationIp',
					langCode: "requestIP"
        },
        {
          title: '请求类型',
          dataIndex: 'operationMethod',
					langCode: "requestType"
        },
        {
          title: '请求耗时',
          dataIndex: 'operationTime',
					langCode: "requestTimeConsuming"
        },
				{
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: {
            customRender: 'renderAction'
          }
        }
      ],
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 查询参数
      queryParam: {
        operationType:'requestLog.01'
      },
      url: {
        getPageSet: '/system/sysOperationLog/getPageSet',
        save: '/system/sysOperationLog/save',
        update: '/system/sysOperationLog/update',
        deleteBatch: '/system/sysOperationLog/deleteBatch'
      },
      startTime:''
    };
  },
  methods: {
    moment,
    startTimeOnChange(val){
      this.queryParam.startTime = val.join(',')
    }
  },
};
</script>

<!--style-->
<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
</style>

